<template>
	<div class="list">
		<div v-for="(item, index) in list" :key="index" class="list__item" :class="{ active: item.id === selectId }" @click="selectValue(item.id)">
			<div class="left">
				<img class="avatar !rounded-[50%] w-[42px] h-[42px]" :alt="item.user.name" :src="item.user.img" />
			</div>
			<div class="right flex flex-col">
				<div class="flex items-center justify-between w-full mb-[9px]">
					<span class="name">{{ item.user.name }}</span>
					<span class="time">{{ item.messages[item.messages.length - 1].date | time }}</span>
				</div>
				<div class="flex items-center w-full">
					<span v-if="item.unreadMessage > 0" class="text-[12px] text-[#1A2483] mr-[4px]">[未读]</span>
					<div v-if="item.msgType === 0" class="msg truncate flex-1">
						{{ item.messages[item.messages.length - 1].content }}
					</div>
					<div v-if="item.msgType === 1" class="msg truncate flex-1">图片</div>
					<div v-if="item.msgType === 2" class="msg truncate flex-1">语音</div>
					<div v-if="item.msgType === 3" class="msg truncate flex-1">视频</div>
					<div v-if="item.msgType === 4" class="msg truncate flex-1">
						{{ url + item.content.goodsId }}
					</div>
					<span v-if="item.unreadMessage" class="tag ml-[18px]">{{ item.unreadMessage }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import dayjs from 'dayjs';
export default {
	computed: {
		...mapGetters(['searchedChatlist', 'selectId']),
		list() {
			return this.searchedChatlist.map((item) => {
				if (item.msgType === 4) {
					item.content = JSON.parse(item.content);
				}
				return item;
			});
		},
	},
	methods: {
		...mapActions({
			getChatlist: 'chat/getChatlist',
			selectSession: 'chat/selectSession',
		}),
		selectValue(id) {
			this.$emit('selectSession', id);
			this.selectSession(id);
		},
	},

	filters: {
		time(date) {
			return dayjs(date).format('HH:mm');
		},
	},
	props: ['clear'],
	data() {
		return {
			interval: null,
			url: process.env.VUE_APP_CHAT_GOODS_DETAIL_URL,
		};
	},
};
</script>

<style lang="scss" scoped>
.list {
	height: 540px;
	overflow-y: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	&__item {
		display: flex;
		padding: 12px;
		transition: background-color 0.1s;
		position: relative;
		border-bottom: 1px solid #f2f2f2;
		cursor: pointer;
		&:hover {
			background-color: #f5f7fb;
		}
		.avatar {
			border-radius: 2px;
			margin-right: 12px;
			width: 42px;
			height: 42px;
		}
		.right {
			position: relative;
			width: calc(100% - 46.5px);
		}
		.name {
			color: #333333;
			font-size: 14px;
		}
		.time {
			color: #999;
			font-size: 12px;
		}
		.msg {
			font-size: 12px;
			color: #808a97;
		}
	}
	.active {
		background-color: #f5f7fb;
	}
	.tag {
		border-radius: 50%;
		color: #ffffff;
		width: 18px;
		height: 18px;
		font-size: 12px;
		text-align: center;
		background: #f14a46;
	}
}
</style>
